<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getNew">显示隐藏div</button>
        <div v-if="show" ref="divCon">哈哈哈</div>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            show:false,
        },
        methods:{
            // 预设条件：点击一个按钮，由v-if让div显示 并且拿到div的内容
            // 预设结果：是可以拿到div的内容
            // 实际结果：在div还没有创建出来时，是拿不到内容的

            // 注：这里涉及到vue异步更新队列的概念！

            // $nextTick：vue观察数据发生变化时并不会直接更新DOM，而是开启一个队列，并缓存同一事件下所有发生变化的数据，
            // 在缓存时会去除重复数据 从而避免不必要的计算和DOM操作；在下一个时间循环tick中，vue刷新队列并执行
            getNew(){
                this.show = !this.show;
                if (this.show) {
                    this.$nextTick(() => {  //DOM更新完成时
                        let text = this.$refs.divCon.innerHTML;
                        console.log(text);
                    })
                }
            },
            
        },
    })
</script>